<template>
  <div class="login">
    <!-- 顶部栏 -->
    <van-nav-bar title="标题" left-arrow />
    <div class="from">
      <h3>你好,请登录</h3>
      <!-- 登录表单 -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="mobile"
          name="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          ><van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="shouji"
          ></van-icon
        ></van-field>
        <van-field
          left-icon="submit"
          v-model="password"
          name="验证码"
          placeholder="请输入验证码"
        >
          <van-icon
            class="iconfont"
            class-prefix="icon"
            slot="left-icon"
            name="submit2"
          ></van-icon>
          <template #button>
            <van-button
              size="small"
              type="default"
              @click="getCode"
              :disabled="codeDisabled"
              >{{ codeMsg }}</van-button
            >
          </template></van-field
        >
        <div class="tiaokuan">
          登录即同意<a href="#">《用户使用协议》</a>和<a href="#"
            >《隐私协议》</a
          >
        </div>
      </van-form>
    </div>
    <div class="btn">
      <van-button round block type="info" @click="onSubmit">登录</van-button>
    </div>
  </div>
</template>

<script>
import { code } from '@/api/login.js'
export default {
  data () {
    return {
      mobile: '18888881111',
      password: '',

      // 是否禁用按钮
      codeDisabled: false,
      // 倒计时秒数
      countdown: 60,
      // 按钮上的文字
      codeMsg: '获取验证码',
      // 定时器
      timer: null
    }
  },
  methods: {
    // 获取验证码
    async getCode () {
      this.codeDisabled = true
      if (!this.timer) {
        this.timer = setInterval(() => {
          if (this.countdown > 0 && this.countdown <= 60) {
            this.countdown--
            if (this.countdown !== 0) {
              this.codeMsg = '重新发送(' + this.countdown + ')'
            } else {
              clearInterval(this.timer)
              this.codeMsg = '获取验证码'
              this.countdown = 60
              this.timer = null
              this.codeDisabled = false
            }
          }
        }, 1000)
      }
      if (this.mobile !== '') {
        const res = await code({
          mobile: this.mobile
        })

        this.password = parseInt(res.data.data)
      }
    },
    // 登录
    async onSubmit () {
      await this.$store.dispatch('login/login', {
        code: this.password,
        mobile: this.mobile
      })
      this.$router.push('./layout/company')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  ::v-deep .van-nav-bar {
    .van-nav-bar__arrow {
      color: #000;
    }
    .van-nav-bar__text {
      color: #000;
    }
  }
  .van-field__left-icon {
    line-height: 36.6px;
  }
  .from {
    .van-form {
      padding: 0 20px;
    }
    h3 {
      height: 25px;
      font-size: 18px;
      margin: 4vw;
      font-weight: 600;
      padding: 0 20px;
    }
    .tiaokuan {
      margin: 15px 0 15px 10px;
      font-size: 12px;
      a {
        font-size: 10px;
        color: #22bbd4;
      }
    }
    .van-button {
      color: #ffffff;
      border: 0;
      color: #4bcde0;
      span {
        font-size: 12px;
      }
    }
  }
  .btn {
    padding: 26px 10px;
    .van-button {
      background-color: #e40137;
      border: 0px;
    }
  }
}
</style>
